//封装的滚动插件使用better-scroll实现
<template>
  <div class="wrapper" ref="scroll">
    <div class="content">
      <!-- 使用插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      scroll: null
    };
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.scroll, {
      //作用：有时候我们需要知道滚动的位置。
      // 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
      // 当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
      // 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
      // 如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
      //这里使用props接受类型是因为用户在使用滚动组件时有时候需要监听滚动事件有时候不需要监听滚动事件,所以需要动态传递处理
      probeType: this.probeType,
      //只有设置为true后内部元素的点击事件才能传递
      click: true,
      //设置是否开启加载更多,这里也定义为用户动态传递,因为有时候是不需要加载更多功能
      pullUpLoad: this.pullUpLoad,
      //设置是否开启下拉刷新的表示
      pullDownRefresh: false
    });

    //监听滚动事件
    if (2 === this.probeType || 3 === this.probeType) {
      this.scroll.on("scroll", positon => {
        //发射滚动事件给调用者,并将滚动的对象传递出去
        this.$emit("scroll", positon);
      });
    }
    //监听滚动到底部的事件
    if (this.pullUpLoad) {
      this.scroll.on("pullingUp", () => {
        this.$emit("loadMore");
      });
    }
  },
  methods: {
    //自定义组件的滚动方法
    /**
     * @param x x轴的滚动位置
     * @param y y轴的滚动位置
     * @param time 滚动的时间 默认300毫秒
     */
    scrollTo(x, y, time = 300) {
      this.scroll && this.scroll.scrollTo(x, y, time);
    },
    //自定义组件的加载更多完成的方法
    finishPullUp() {
      //调用Better-Scroll的结束上拉加载更多的方法
      this.scroll && this.scroll.finishPullUp();
    },
    //刷新的方法
    refresh() {
      //调用Better-Scroll的刷新方法
      this.scroll && this.scroll.refresh();
    },
    //获取滚动的位置
    getScrollY() {
      return this.scroll ? this.scroll.y : 0;
    }
  },
  props: {
    probeType: {
      type: Number,
      default() {
        return 0;
      }
    },
    pullUpLoad: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped>
</style>
